<template>
  <div>
    <a-modal v-model="visible" title="修改密码" on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleCancel"> 取消 </a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleOk"
        >
          提交
        </a-button>
      </template>
      <div class="input_parts">
        <div class="name_part">
          <div class="name_label">新密码</div>
          <a-input
            placeholder="请输入新密码"
            allow-clear
            type="password"
            v-model="newPassword"
          />
        </div>
        <div class="desc_part">
          <div class="desc_label">原密码</div>
          <a-input
            type="password"
            placeholder="请输入原密码"
            allow-clear
            v-model="oldPassword"
          />
        </div>
        <!-- 树状图多选组件 进行permission 的处理 -->
      </div>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      visible: false,
      newPassword: "",
      oldPassword: "",
    };
  },
  created() {},

  methods: {
    init() {
      this.$nextTick(async () => {
        this.visible = true;
        // 设置更新标志 让确认时 发送不同的请求
      });
    },

    async handleOk(e) {
      const { data: res } = await this.$http.put("/admin/user/updatepass", {
        newPassword: this.newPassword,
        oldPassword: this.oldPassword,
      });
      if (res.code == 200) {
        this.common.notify("success", "修改密码成功");

        // this.$message.success("修改密码成功");
        this.visible = false;
        // 将登录信息删除
        window.localStorage.setItem("authorization", "");
        this.$router.push({
          path: "/login",
        });
      } else {
        this.common.notify("warning", "密码修改失败");

        // this.$message.warning("密码修改失败");
      }
    },
    handleCancel(e) {
      this.visible = false;
    },
    // 数组去重
  },
};
</script>
<style  lang='less' scoped>
.name_part {
  display: flex;
  .name_label {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    margin-right: 28px;
  }
}
.desc_part {
  display: flex;
  margin-top: 20px;
  .desc_label {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    margin-right: 28px;
  }
}

/deep/ .ant-modal-body {
  text-align: center;
}
.name_label {
  margin-left: 50px;
}
</style>